<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="菜品id" prop="id">
                <el-input v-model="ruleForm.id" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="菜品名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="菜品描述" prop="description">
                <el-input v-model="ruleForm.description"></el-input>
            </el-form-item>
            <el-form-item label="菜品价格" prop="price">
                <el-input v-model.number="ruleForm.price"></el-input>
            </el-form-item>
            <el-form-item label="口味名称" prop="flavorName">
                <el-input v-model="ruleForm.flavorName" placeholder="请使用;区分不同的口味"></el-input>
            </el-form-item>
            <el-form-item label="口味选择单" prop="value">
                <el-input v-model="ruleForm.value" placeholder="请使用;区分不同的口味,用英式,区分相同口味的选择"></el-input>
            </el-form-item>
            <el-form-item label="销售状态" prop="status">
                <el-radio v-model="ruleForm.status" label="1">在售</el-radio>
                <el-radio v-model="ruleForm.status" label="0">停售</el-radio>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即更新</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { updateDish } from '@/utils/requests'
export default {
    props: ['transid', 'transname', 'transdescription', 'transprice', 'transstatus', 'transflavorName','transvalue'],
    watch: {
        transid: {
            handler: function (newVal) {
                this.ruleForm.id = newVal
            },
            immediate: true,
            deep: true
        },
        transname: {
            handler: function (newVal) {
                this.ruleForm.name = newVal
            },
            immediate: true,
            deep: true
        }, transdescription: {
            handler: function (newVal) {
                this.ruleForm.description = newVal
            },
            immediate: true,
            deep: true
        }, transprice: {
            handler: function (newVal) {
                this.ruleForm.price = newVal
            },
            immediate: true,
            deep: true
        }, transstatus: {
            handler: function (newVal) {
                if (newVal == '在售') {
                    this.ruleForm.status = '1'
                } else {
                    this.ruleForm.status = '0'
                }
            },
            immediate: true,
            deep: true
        }, transflavorName: {
            handler: function (newVal) {
                this.ruleForm.flavorName = newVal
            },
            immediate: true,
            deep: true
        },transvalue:{
            handler: function (newVal) {
                this.ruleForm.value = newVal
            },
            immediate: true,
            deep: true
        }
    },
    data() {
        var validateFlavorName = (rule, value, callback) => {
            if (value == '') {
                callback(new Error('请填写内容'))
            }
            let dataName = value.split(';')
            for (let i = 0; i < dataName.length; i++) {
                if (dataName[i] == '') {
                    callback(new Error('格式错误,末尾不得有分号'))
                }
                if (dataName[i].indexOf("；") != -1) {
                    callback(new Error('请使用英式分号'))
                    return
                }
                if (dataName[i].indexOf("，") != -1) {
                    callback(new Error('请使用英式逗号'))
                    return
                }
            }
            callback()
        }
        var validateFlavorValue = (rule,value,callback) =>{
            if(value == ''){
                callback(new Error('请填写内容'))
            }
            let dataName = value.split(';')
            for(let i = 0 ; i < dataName.length ; i++){
                if(dataName[i] == ''){
                    callback(new Error('格式错误,末尾不得有分号'))
                }
                if(dataName[i][dataName[i].length-1] == ','){
                    callback(new Error('请注意逗号位置是否正确'))
                }
                if(dataName[i].indexOf("；") != -1){
                    callback(new Error('请使用英式分号'))
                    return 
                }
                if(dataName[i].indexOf("，") != -1){
                    callback(new Error('请使用英式逗号'))
                    return 
                }
            }
            callback()
        }
        return {
            ruleForm: {
                id: '',
                name: '',
                description: '',
                price: 14,
                status: '1',
                flavorName: '',
                value:''
            },
            rules: {
                id: [
                    { required: false }
                ],
                name: [
                    { required: true, message: '请输入菜品名称', trigger: 'blur' },
                    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                ],
                description: [
                    { required: true, message: '请输入菜品分类', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                ],
                price: [
                    { required: true, message: '价格不能为空' },
                    { type: 'number', message: '价格必须为数字', trigger: 'keyup' }
                ],
                status: [
                    { required: true, message: '请选择一种销售状态', trigger: 'change' }
                ],
                flavorName: [
                    { validator: validateFlavorName, trigger: 'blur' }
                ],
                value: [
                    { validator: validateFlavorValue, trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    updateDish(this.ruleForm).then((res) => {
                        if (res.statusCode == 200) {
                            this.$message({
                                showClose: true,
                                message: res.message,
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                showClose: true,
                                message: res.message,
                                type: 'error'
                            })
                        }
                    })
                    // 表单提交事件触发后自动触发父组件中的change
                    this.$emit('change', false)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>